<template>
  <h1>一个人的信息</h1>
  <h3>姓名: {{ name }}</h3>
  <h3>年龄:{{ age }}</h3>
  <h3>工种:{{ job.type }}</h3>
  <h3>薪资:{{ job.salary }}</h3>
  <h3>测试深层的对象嵌套:{{ job.a.b.c }}</h3>
  <button @click="changeName">修改人的信息</button>
</template>

<script>
// https://www.bilibili.com/video/BV1Zy4y1K7SH?p=159&vd_source=cd7c05823c8e4a5b7a5754b7ad8fe5de

//shallowReactive :只处理对象最外层属性的响应式（浅响应式)。
// shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。。什么时候使用?
// 如果有一个对象数据，结构比较深,但变化时只是外层属性变化===> shallowReactive。
// 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换===>shallowRef.

import { reactive,toRefs,shallowReadonly,shallowReactive,shallowRef,readonly} from "vue";
export default {
  name: "App",
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        type: "web前端开发",
        salary: "30k",
        a: {
          b: {
            c: 6666,
          },
        },
      },
    });
    // person=readonly(person);
    person=shallowReadonly(person)
    const changeName = () => {
      person.name = person.name == "李四" ? "张三" : "李四";
      person.age = person.age == 18 ? 99 : 18;
      person.job.type = "测试老六";
      person.job.salary = "20k";
      person.job.a.b.c = 9999;
    };
    return {
      person,
      // name:toRef(person,'name'),
      // age:toRef(person,'age'),
      ...toRefs(person),
      changeName,
    };
  },
};
</script>

<style scoped>
</style>
